<!-- 我的参与 -->
<template>
	<view class="index-container-box">
		<!-- 顶部导航条 -->
		<u-sticky class="top-container">
			<u-tabs
				:list="tabsList"
				:is-scroll="false"
				active-color="#00C9B1"
				bar-width="120"
				item-width="375"
				gutter="80"
				:current="tabsActiveIndex"
				@change="tabsChange"
			></u-tabs>
		</u-sticky>
		<!-- 主体内容区域 -->
		<scroll-view
			scroll-y="true"
			class="container-box"
			:refresher-enabled="true"
			:refresher-triggered="isRefresh"
			@refresherrefresh="refresherStart"
			@scrolltolower="scrollToLower"
		>
			<block v-for="caseItem in userDataList" :key="caseItem.id">
				<release-item :index="tabsActiveIndex" :itemObj="caseItem" @deleteClick="orderItemDeleteClick" @starClick="orderItemStarClick"></release-item>
			</block>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {
				page: 1,
				page_size: 10,
				is_self: 0 // 0:就是所有帖子 1：自己的帖子
			},
			tabsList: [{ name: '律师圈' }, { name: '问答咨询' }],
			tabsActiveIndex: 0,
			// 数据列表
			userDataList: [],
			// 控制删除提示框的显示与隐藏
			delTipModelShow: false,
			isRefresh: false,
			// 删除的帖子的 ID
			deleteCaseID: ''
		};
	},
	onLoad() {
		this.sortData.page = 1;
		this.userDataList = [];
		this.getData();
	},
	onShow() {
		// 如果 vuex_isSubmit 为 true 则此页面进行刷新
		if (this.vuex_isSubmit) {
			this.sortData.page = 1;
			this.userDataList = [];
			this.getData();
			this.$u.vuex('vuex_isSubmit', false);
		}
		// 判断是否在帖子详情页删除了帖子，如果删除了 则 vuex_caseDeleteID 会有被删除的帖子的 id
		if(this.vuex_caseDeleteID) {
			let index = this.userDataList.findIndex(item => item.id == this.vuex_caseDeleteID)
			if(index != -1) {
				this.userDataList.splice(index, 1)		// 移除这条在详情页已经被删除了的数据
				this.$u.vuex('vuex_caseDeleteID', '')	// 将 vuex 中存储的被删除的帖子的 id 清空
			}
		}
	},
	methods: {
		// 获取数据
		async getData() {
			if (this.tabsActiveIndex === 0) {		// 获取律师圈的数据列表
				const res = await this.$u.api.getMyLawyerParticipation(this.sortData);
				if (res.list.data.length < 1) return (this.sortData.page = this.sortData.page <= 1 ? 1 : this.sortData.page - 1);
				this.userDataList = [...this.userDataList, ...res.list.data];
				return;
			}
			// 获取问答咨询数据列表
			const res = await this.$u.api.getMyParticipation(this.sortData);
			if(!res) return
			this.userDataList = [...this.userDataList, ...res.list.data];

			// console.log('最新数据列表', this.userDataList);
		},
		// 顶部的 tab 栏切换
		tabsChange(index) {
			this.tabsActiveIndex = index;
			this.sortData.page = 1
			this.userDataList = []
			this.getData()
		},
		// 点赞事件
		orderItemStarClick(id) {
			let index = this.userDataList.findIndex(item => item.id === id);
			this.userDataList[index].has_star = !this.userDataList[index].has_star;
			if (this.userDataList[index].has_star) {
				// 判断点赞数是该 +1 还是 -1
				this.userDataList[index].star_num += 1;
			} else {
				this.userDataList[index].star_num -= 1;
			}
		},
		// 删除了帖子
		orderItemDeleteClick(id) {
			let index = this.userDataList.findIndex(item => item.id === id);
			this.userDataList.splice(index, 1); // 将这项从数据列表中删除
		},
		// scroll-view 的下拉刷新
		async refresherStart() {
			this.isRefresh = true; // 下拉刷新被触发的状态
			this.sortData.page = 1;
			this.userDataList = [];
			await this.getData();
			this.isRefresh = false; // 关闭下拉刷新状态
			this.$u.toast('页面已刷新');
		},
		// scroll-view 滚动条触底事件
		scrollToLower() {
			this.sortData.page += 1;
			this.getData();
		}
	}
};
</script>

<style lang="scss" scoped>
.index-container-box {
	width: 750rpx;
	min-height: 100vh;
	background-color: #f4f6fa;
	.top-container {
		width: 750rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
	}
	.container-box {
		width: 100%;
		height: calc(100vh - 40px);
	}
	.problem-box {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		background-color: #00c9b1;
		text-align: center;
		position: fixed;
		right: 20rpx;
		top: 936rpx;
		overflow: hidden;
		.problem {
			line-height: 110rpx;
			background-color: rgba(0, 0, 0, 0);
			font-size: 24rpx;
			color: #f4f6fa;
			text-align: center;
		}
	}
}
</style>
